<template>
  <div class="detail">
    <TableHeaderMini />
    <div class="default-main ba-table-box">
      <el-alert
        class="ba-table-alert"
        v-if="baTable.table.remark"
        :title="baTable.table.remark"
        type="info"
        show-icon
      />
      <!-- 表格顶部菜单 -->
      <TableHeader
        :buttons="['refresh', 'comSearch', 'columnDisplay']"
        :quick-search-placeholder="placeholder"
        @action="baTable.onTableHeaderAction"
      />
      <Table ref="tableRef" @action="baTable.onTableAction" />
      <!-- 表单 -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi } from "@/utils/common"; // 导入表格api方法生成器
import { EquipMWarnHandle } from "@/api/backend/index";
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import _ from "lodash";
import { useRoute, useRouter } from "vue-router";
import TableHeaderMini from "./tableHeader.vue";
import { useNavTabs } from "@/store/navTabs";

const formRef = ref();
const placeholder = ref<string>("模糊搜索");
const tableRef = ref();
const route = useRoute();
const router = useRouter();
const navTabs = useNavTabs();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + EquipMWarnHandle)
      ? (navTabs as any).pageSizeMap.get(route.path + EquipMWarnHandle)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(EquipMWarnHandle), //该用户管理增删改查封装好的api
  {
    pk: "eid",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("ecode"),
        label: "设备编号",
        prop: "ecode",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("createUser"),
        label: "处理人",
        prop: "createUser",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("phone"),
        label: "联系方式",
        prop: "phone",
        align: "center",
        operatorPlaceholder: "模糊搜索",
        operator: false,
      },
      {
        show: filedShowOff("type"),
        label: "类型",
        prop: "type",
        align: "center",
        render: "tag",
        custom: { 1: "success", 2: "info" },
        replaceValue: {
          1: "更换滤芯",
          2: "其他",
        },
      },
      {
        show: filedShowOff("handleSc"),
        label: "处理说明",
        prop: "handleSc",
        align: "center",
        operatorPlaceholder: "模糊搜索",
        operator: false,
      },
      {
        show: filedShowOff("pressureValue"),
        label: "压力初始值",
        prop: "pressureValue",
        align: "center",
        operatorPlaceholder: "模糊搜索",
        operator: false,
      },
      {
        show: filedShowOff("criticalValue"),
        label: "压力临界值",
        prop: "criticalValue",
        align: "center",
        operatorPlaceholder: "模糊搜索",
        operator: false,
      },
      {
        show: filedShowOff("lifeValue"),
        label: "使用寿命长度",
        prop: "lifeValue",
        align: "center",
        operatorPlaceholder: "模糊搜索",
        operator: false,
      },
      {
        show: filedShowOff("handleTime"),
        label: "处理时间",
        prop: "handleTime",
        align: "center",
        operatorPlaceholder: "模糊搜索",
        operator: false,
      },
    ],
    filter: { eid: route.query.eid, pageSize: pageSizeKeep() },
    acceptQuery: false, //不接受url的query参数并自动触发通用搜索
  }
);

onMounted(() => {
  //全局事件总线
  const { proxy } = useCurrentInstance();
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(EquipMWarnHandle);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      console.log("data", data);
      if (data.name == "info") {
      }
    }
  );
  console.log("router", router.currentRoute.value.path);
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
</script>
<style lang="scss" scoped></style>
